{% extends webapp_config['LAYOUT'] %}

{% block meta_title %}
  {% if query %}
    Snap search results for '{{ query }}'
    {% if category_display %}
      in {{ category_display }}
    {% endif %}
  {% elif category_display %}
    {{ category_display }}
  {% else %}
    Search Snap Store
  {% endif %}
  — Linux software in the Snap Store
{% endblock %}

{% block content %}
  <section id="main-content" class="p-strip--image is-shallow snapcraft-banner-background">
    <div class="row">
      <form action="/search" class="p-form p-form--inline p-form--search">
        <div class="p-form__group">
          <label for="search-input" class="u-off-screen">Search</label>
          <div class="p-form__control u-clearfix">
            <input class="u-no-margin--bottom" id="search-input" type="search" name="q" value="{{ query }}" />
          </div>
        </div>
        <button type="submit" alt="search" class="p-button--positive">Search</button>
      </form>
    </div>
  </section>

  <section class="p-strip is-shallow">
    {% if snaps %}
      <div class="row">
        {% if not query and category_display %}
          <a href="/store">&lsaquo; Categories</a>
          <h2>{{ category_display }} snaps</h2>
        {% else %}
          <h2>We’ve found some snaps</h2>
        {% endif %}
      </div>
      <div class="row">
        <div class="col-8">
          {% for snap in snaps %}
            <div class="p-media-object">
              <a href="/{{ snap.package_name }}" class="p-media-object__image">
                {% if snap.icon_url %}
                  <img src="{{ snap.icon_url }}"  alt="">
                {% else %}
                  <img src="https://assets.ubuntu.com/v1/be6eb412-snapcraft-missing-icon.svg"  alt="">
                {% endif %}
              </a>
              <div class="p-media-object__details">
                {# FIXME u-no-margin is a workaround for https://github.com/vanilla-framework/vanilla-framework/issues/1879 #}
                <h3 class="p-media-object__title u-no-margin">
                  <a href="/{{ snap.package_name }}">{{ snap.title }}</a>
                </h3>
                <ul class="p-media-object__meta-list u-no-margin">
                  <li class="p-media-object__meta-list-item">
                    <span class="u-off-screen">Publisher: </span>{{ snap.publisher }}
                    {% if snap.developer_validation and snap.developer_validation == VERIFIED_PUBLISHER %}
                      <span class="p-verified p-tooltip p-tooltip--top-center" aria-describedby="{{ snap.package_name }}-tooltip">
                          <img src="https://assets.ubuntu.com/v1/75654c90-rosette.svg" />
                          <span class="p-tooltip__message u-align--center" role="tooltip" id="{{ snap.package_name }}-tooltip">Verified account</span>
                        </span>
                    {% endif %}
                  </li>
                </ul>
                <p class="p-media-object__content">{{ snap.summary }}</p>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% else %}
      <div class="row">
        <h2>Sorry, we couldn’t find any snaps</h2>
      </div>
      {% if category %}
        <div class="row">
          <h3>Other {{ category_display|lower }} snaps</h3>
        </div>
        <div data-category="{{ category }}" class="row js-store-category">
          {# _category-partial.html loaded via JS #}
        </div>
      {% else %}
        {% for category in categories %}
          {% if loop.index > 1 %}
            <div class="row">
              <hr />
            </div>
          {% endif %}

          <div class="row">
            <h3>{{ category.name }}</h3>
          </div>
          <div data-category="{{ category.slug }}" class="row js-store-category">
            {# _category-partial.html loaded via JS #}
          </div>
        {% endfor %}
      {% endif %}
    {% endif %}
  </section>

  {% if links %}
    <section class="p-strip is-shallow">
      <nav class="row">
        <div class="col-6 u-align--left">
          {% if links.first %}<a href="{{ links.first }}">&#171;&nbsp;First</a>&nbsp;{% endif %}
          {% if links.prev %}<a href="{{ links.prev }}">&#8249;&nbsp;Previous</a>{% endif %}
        </div>
        <div class="col-6 u-align--right">
          {% if links.next %}<a href="{{ links.next }}">Next&nbsp;&#8250;</a>{% endif %}
          {% if links.last %}&nbsp;<a href="{{ links.last }}">Last&nbsp;&#187;</a>{% endif %}
        </div>
      </nav>
    </section>
  {% endif %}
{% endblock %}

{% block scripts_includes %}
  <script src="{{ static_url('js/dist/public.js') }}" defer></script>
{% endblock %}

{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function () {
        snapcraft.public.storeCategories();
      });
    });
  </script>
{% endblock %}
